上一篇文章了解如何建立的專案後,今天我們就來了解專案的架構
tsconfig.app.json
、tsconfig.json
、tsconfig.spec.json
:這三個是 TypeScript 的相關設定檔,設定一些 TypeScript 編譯的選項,除非熟悉 TypeScript 設定,否則不建議更動。package.json
、package-lock.json
:這兩個是 npm 的相關設定檔,記錄專案所需的套件和版本資訊,當我們安裝新的套件時,會自動更新這些檔案。angular.json
:這是 Angular CLI 的主要設定檔,跟 typeScript 設定檔一樣,通常不太需要更動,除非需要自訂一些建置選項。.editorconfig
:這是用來統一團隊成員在編輯器中的格式設定,例如縮排、換行等。.gitignore
:這是用來忽略不需要加入版本控制的檔案,例如 node_modules 資料夾。src
:這是我們主要開發的資料夾。
app
:尤其是其中的 app 資料夾,幾乎所有的程式碼都會放在這個資料夾中。styles.css
:這是全域的樣式檔案,可以在這裡定義一些全域的 CSS 樣式。index.html
:這是應用程式的入口檔案,所有的元件都會被載入到這個檔案中。main.ts
:這是應用程式的主要 TypeScript 檔案,負責啟動 Angular 應用程式。public
:這是用來放置靜態資源的資料夾,例如圖片等,在專案需要進行建置時,這些檔案會被直接複製到建置後的輸出資料夾中。根據 Angular CLI 的版本,會有不同的命名慣例
app.component.ts
。app.ts
。由於 Angular 維持有後綴命名慣例已經有一段時間了,因此這系列的文章也會以這種方式來命名檔案。讓我們在 angular.json
中的 schematics 加上這段設定,這樣可以在使用 Angular CLI 快速生成檔案的相關指令 (如 ng generate component
、ng generate service
等)時,會自動產生有後綴的檔案。
{
"projects": {
"<project-name>": {
...
"schematics": {
"@schematics/angular:component": { "type": "component" },
"@schematics/angular:directive": { "type": "directive" },
"@schematics/angular:service": { "type": "service" },
"@schematics/angular:guard": { "typeSeparator": "." },
"@schematics/angular:interceptor": { "typeSeparator": "." },
"@schematics/angular:module": { "typeSeparator": "." },
"@schematics/angular:pipe": { "typeSeparator": "." },
"@schematics/angular:resolver": { "typeSeparator": "." }
},
...
}
schematics 的設定會影響你使用 Angular CLI ,產生檔案的預設選項。例如,你可以設定產生元件時是否自動建立測試檔、是否加上樣式檔案、預設使用哪種樣式(CSS、SCSS)等。
由於 Angular 預設採用 Single Page Application (SPA) 架構,所有 UI 的渲染都在瀏覽器端進行。因此,index.html 只包含一個 app-root 標籤,內容會由 Angular 框架在執行時動態產生與更新。
SPA 單頁式應用程式
- Single Page Application (SPA) 是一種網頁應用程式架構,允許使用者在單一網頁上進行多次互動,而不需要重新載入整個頁面。
- 所有 UI 渲染都在客戶端進行,並且透過 AJAX 或 Fetch API 與後端伺服器進行資料交換。這樣的設計可以提供更流暢的使用者體驗,因為頁面不需要頻繁地重新載入。
- 缺點是 SEO 支援較差,因為實際上的內容是由 JavaScript 動態生成的,搜尋引擎可能無法正確索引這些內容。
在 Angular 專案中,應用程式的進入點是 main.ts
檔案,負責啟動 Angular 應用程式。啟動時,Angular 會將根元件 App 動態載入到 index.html 中的 app-root 標籤內。
就像圖片看到的一樣,原始碼不會有任何內容,所有的內容都是由 Angular 動態產生的,TypeScript 原始碼會被編譯成 JavaScript,這些檔案會被載入到 index.html 中,然後由瀏覽器執行,動態產生 DOM 結構。
根據 Angular 版本不同,啟動方式略有差異,但核心概念一致。
目前 Angular 推薦的啟動方式:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));
當然根據的版本不同,你可能會看到不同的寫法,例如傳統的模組化寫法:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
這兩種寫法主要是獨立元件的寫法以及和傳統的模組化寫法。這在接下來的文章中會有更詳細的介紹。
這篇文章主要介紹了 Angular 專案的基本架構與應用程式進入點,讓大家對於 Angular 專案的結構有初步的了解。下一篇文章會先介紹 Angular 框架的最小單位 - 元件(Component)。